<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="qwe1">
    <p>段</p>
    <span>sp</span>
  </div>
  <script>
    var qs = document.getElementById("qwe1");
    // 获取子节点
    // 获取所有类型的子节点,实时变化的
    console.log(qs.childNodes);
      // 0: text
      // 1: p
      // 2: text
      // 3: span
      // 4: text
      // length: 5
      // [[Prototype]]: NodeList

    // 所有的元素类型的的子节点组合
    console.log(qs.children);
      // 0: p
      // 1: span
      // length: 2
      // [[Prototype]]: HTMLCollection
    // 所有类型子节点的第一个 
    console.log(qs.firstChild);
    // 所有类型子节点的最后一个
    console.log(qs.lastChild);
    // 所有元素子节点的第一个
    console.log(qs.firstElementChild);
    // 所有元素子节点的最后一个
    console.log(qs.lastElementChild);
    // 获取父级
    console.log(qs.parentNode);
    console.log(qs.parentElement);
    var body =document.body
    console.log(body.parentNode);
    console.log(body.parentElement);

  </script>
</body>
</html>